<template>
	<div class="cityListview">
		<b-scroll @bsloaded="bsloaded">
			<div class="cityList" v-for="(item,index) in formatCityList" :key="index">
				<div class="pyName" :id="item.name">{{item.name.toUpperCase()}}</div>
				<div @click="chooseCity(cityItem)" class="cityItem" v-for="(cityItem) in item.list" :key="cityItem.py">{{cityItem.nm}}</div>
			</div>
		</b-scroll>
		<div class="rightBar">
			<div @click="scrollToCity(item.name)" v-for="(item,index) in formatCityList" :key="index">
				{{item.name.toUpperCase()}}
			</div>
		</div>
	</div>
</template>

<script>
	import formatCityList from "../config/formatCityList.js";
	import BScroll from "../components/BScroll.vue";
	export default {
		name:"cityListView",
		data() {
			return {
				formatCityList:formatCityList,
				scroll:null   //B-Scroll的组件对象
			}
		},
		methods:{
			//通过一个像这样的方法 ，就可以拿到我们的scroll对象
			bsloaded(scroll){
				this.scroll=scroll;
			},
			scrollToCity(cityId){
				//cityId应该就是元素的id
				this.scroll.scrollToElement(document.getElementById(cityId));
			},
			chooseCity(cityItem){
				//通过自定义事件，向父组件传值
				this.$emit('getCity',cityItem);
			}
		},
		components:{
			BScroll
		}
	}
</script>

<style lang="scss" scoped>
	@import "../assets/css/comm.scss";
	.cityListview{
		position: fixed;
		width: 100vw;
		height: 100vh;
		top: 0px;
		left: 0px;
		background-color: white;
		.cityList{
			.pyName{
				background-color: #f1eaea;
				@include flexbox();
				height:.6rem;
				align-items: center;
				box-sizing: border-box;
				padding-left: .4rem;
			}
			.cityItem{
				box-sizing: border-box;
				padding: 0  0.4rem;
				height:0.9rem;
				@include flexbox();
				align-items: center;
				border-bottom: 1px solid #999999;
				font-size: .28rem;
			}
		}
		.rightBar{
			position: fixed;
			right: .1rem;
			top: 1.4rem;
			bottom: 1.4rem;
			width: .4rem;
			background-color: rgba(0,0,0,0.2);
			border-radius: .2rem;
			@include flexbox(column);
			align-items: center;
			justify-content: space-around;
			>div{
				font-size: .24rem;
			}
		}
	}
</style>
